<template>
  
   
      <div class="common-layout">
    <el-container>
      <el-header>

      </el-header>
      <el-main>
        
        
        <el-row>
      <el-col :span="8">
        <div class="grid-content ep-bg-purple" >
          <h3>角色名称</h3>
          <el-tree
            style="max-width: 600px"
            :data="tableData"
            :props="PropsTwo"
            node-key="id"
            ref="RoletreeRef"
            :highlight-current="true"
            @node-click="getRoleMenu()"
          />
           
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple-light" >
          <h3>菜单树形</h3>
          <el-tree
            style="max-width: 600px"
            :data="menuData"
            show-checkbox
            node-key="id"
            ref="MenutreeRef"
            default-expand-all
            :props="PropsThree"
          />
        </div>
      </el-col>
    </el-row>
      <div class="dialog-footer" style="float: right;">
        <el-button @click="rmLogic = false">取消</el-button>
        <el-button type="primary" @click="saveRoleMenu()">
          保存
        </el-button>
      </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { readBasic, writeBasic } from '@/Helper/axiosSetting'
import { ElMessage, type TreeInstance } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

onMounted(()=>{
    getRoleList()
    getMenuList()
})
//获取角色列表
const tableData = ref([])
const page=reactive({
    PageIndex:1,
    PageSize:15,
    listcount:0
})
watch(page,()=>{
    getRoleList()
},{deep:true})
const getRoleList=()=>{
    readBasic.get("api/Manage/GetRoleList",{params:{
        PageIndex:page.PageIndex,
        PageSize:page.PageSize
    }}).then(res=>{
        tableData.value=res.data.data.list
        page.listcount=res.data.data.recordCount
    })
}
//----------------------------------角色分配菜单---------------------------------
//分配菜单中间实体
const rmLogic=ref(false)
//打开分配菜单对话框
const openRM=()=>{
  rmLogic.value=true
  getMenuList()
  
}
//角色树形渲染
const PropsTwo = {
  children: 'list',
  label: 'roleName',
}
//实例角色树组件
const RoletreeRef=ref<TreeInstance>()
//实例菜单树组件
const MenutreeRef = ref<TreeInstance>()
//菜单树形渲染
const PropsThree = {
  children: 'children',
  label: 'menuName',
}
//菜单树形实体
const menuData=ref([])
//获取菜单树数据
const getMenuList=()=>{
    readBasic.get("api/Menu/GetMenuList",{params:{
        PageIndex:page.PageIndex,
        PageSize:page.PageSize
    }}).then(res=>{
        menuData.value=res.data.data.list
    })
}
const RMData=reactive({
  rid:0,
  midList:'',
  List:[]
})
//为角色分配菜单
const saveRoleMenu=()=>{



  // RoletreeRef.value?.setCurrentKey(8,false)//反填角色
  console.log(RMData.List.toString())//获取菜单ID数组
  console.log(RoletreeRef.value?.getCurrentNode().id)//获取角色选中节点ID
  RMData.rid=RoletreeRef.value?.getCurrentNode().id
  RMData.midList=MenutreeRef.value?.getCheckedKeys().toString()||""
  console.log(RMData.midList)
  writeBasic.post("api/Menu/RoleMenuAdd",RMData).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.message)
      RMData.List=[]
    }else{
      ElMessage.error("分配失败")
    }
  })


}
//根据角色Id获取拥有的菜单
const getRoleMenu=()=>{
  readBasic.get("api/Menu/GetRoleMenu",{params:{rid:RoletreeRef.value?.getCurrentNode().id}}).then(res=>{
     MenutreeRef.value?.setCheckedKeys(res.data.data,true);
  })
}
</script>